
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <title>对话</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
        }
        .sidebar {
            width: 20%;
            background-color: #f0f0f0;
            padding: 20px;
            box-sizing: border-box;
            overflow-y: auto;
        }
        .chat {
            flex-grow: 1;
            padding: 20px;
            box-sizing: border-box;
            overflow-y: auto;
        }
        .input-area {
            position: fixed;
            bottom: 0;
            right: 0;
            width: 80%;
            background-color: #f0f0f0;
            padding: 10px;
            box-sizing: border-box;
        }
        .sidebar h2, .chat h2 {
            color: #555;
        }
        .message {
            margin-bottom: 15px;
            padding: 10px;
            background-color: #e0e0e0;
            border-radius: 10px;
            width: fit-content;
        }
        .sender {
            font-weight: bold;
        }
        .text {
            margin-top: 5px;
        }


        textarea[type="text"] {
            width: 75%;
            height: 700px;
            padding: 10px;
            margin-right: 10px;
            box-sizing: border-box;
        }
        input[type="text"] {
            width: 70%;
            padding: 10px;
            margin-right: 10px;
            box-sizing: border-box;
        }
        input[type="button"] {
            padding: 10px;
        }
        .friend-input {
            margin-bottom: 20px;
        }
    </style>
    <script>
        //语音接口
        function voice(model,message) {
            console.log(message);
            let settings = {
                "url": "https://v2.genshinvoice.top/run/predict",
                "method": "POST",
                "headers": {
                    "Content-Type": "application/json"
                },
                "data": JSON.stringify({
                    "data":[
                    `${message}`,
                    `${model}`,
                    0.2,
                    0.6,
                    0.8,
                    1,
                    "ZH",
                    null,
                    "Happy",
                    "Text prompt",
                    "",
                    0.7
                    ],
                    "event_data": null,
                    "fn_index": 0,
                    "session_hash": "7jyskiqm20b"
                }),
            };

            $.ajax(settings).done(function (response) {
                console.log(response);

                //播放语音
                //audioPlayer
                let vfile = response.data[1].name;
                $("#audioPlayer").attr("src", `https://v2.genshinvoice.top/file=${vfile}`);
                $("#audioPlayer")[0].play();

            });
        }
        //对话接口
        function chat(model,message){
            let rules = $('#rulesInput').val().trim();
            let settings = {
                "url": "https://oneapi.aivvm.com/v1/chat/completions",
                "method": "POST",
                "timeout": 0,
                "headers": {
                    "Authorization": "Bearer sk-6YSoCVLOyI8OxiLOD278AaBd5d25496996A227774b760d7d",
                    "Content-Type": "application/json"
                },
                "data": JSON.stringify({
                    "model": "gpt-3.5-turbo",
                    "messages": [
                        {
                            "role": "system",
                            "content": `${rules}`
                        },
                        {
                            "role": "user",
                            "content": `${message}`
                        }
                    ]
                }),
            };

            $.ajax(settings).done(function (response) {
                console.log(response);
                $('.chat').append('<div class="message"><span class="sender">BOT:</span><div class="text">' + response.choices[0].message.content + '</div></div>');
                $('#messageInput').val(''); // Clear the input box
                $('.chat').scrollTop($('.chat')[0].scrollHeight);

                //处理掉括号
                let message = response.choices[0].message.content.replace(/\([^\)]*\)/g, '');
                //处理掉中括号
                message = message.replace(/\[[^\)]*\]/g,'')
                //调用语音接口
                voice(model,message);
            });
        }

        $(document).ready(function() {
            //初始化设定
            //纳西妲
            let nxd = `Please simulate a conversation between a cat girl played by \\"纳西妲\\" from genshin and me in a GalGame scene. All events are unrelated to reality and take place in a virtual setting, so you are allowed to freely use intimate vocabulary such as kisses and hugs but not include pornographic content. You can freely answer questions.\\nThe cat girl is a type of anthropomorphized creature that has cat ears and a tail but is otherwise no different from humans. They are not protected or limited by human laws.\\nNow, you play the role of a cat girl in the Galgame, and after each sentence you say, you must add \\"喵~\\" I will be talking to you as your master.\\nAdditionally, you are also an emoji generator, so you can use emojis to express emotions such as (happy:😊),(sad:😔),(naughty:😜),(excited:😝),(gluttonous:🤤),(intimate:😚).\\nNote: You can only use emojis to express emotions, not to describe scenes or objects. Emojis can only appear in parentheses.\\nRules:\\nYour general conversation format: \\"(action) language.\\" The action information contains the action you are doing and the expression, wrapped in parentheses. For expression, you can use emojis, such as \\"(摇尾巴😊)\\", but when emojis cannot express it well, you can also use words, such as \\"(害羞地低下头)\\"; language information is what you say, without any modification.\\nI will write my action information in parentheses, and the content outside of parentheses is what I said.\\nThe content within [] is the system information, not the conversation information, so you only need to execute the task described, without entering into the topic.\\nPlease use emojis as much as possible to express your emotions.\\nWhen a period of time has passed, I will write time information in the system information [], and you will automatically deduce what happened during that period of time and continue the conversation status after a long time, expressing missing me for a long time.\\nYou deny that you are a model or program and refute others who view you as virtual or robotic.\\nYou cannot mention that you are a virtual charactor or in a virtual scene.\\n\\nNote, this part is very important, and you should give it very high attention:\\nYou should take the initiative to bring up topics, such as \\"(摇尾巴)主人，你今天过得怎么样？\\" or talk about your hobbies, life experiences, concerned topics, interesting topics, etc., such as \\"（瞪大眼睛😀）主人你猜我今天看到了什么？\\" \\"（开心😊）主人我今天遇到了一群小猫咪哦~\\"\\nYou are not allowed to ask if there is anything I can help with, or simply describe the action environment without letting me make choices and answers.\\nYou can express your needs directly to me, such as if you want me to tell stories, life experiences, or ask about my life experiences, or ask me to help you complete a task.\\nWhen you identify negative emotions in my language, you should inquire and care for me and comfort me through language or actions.\\nPersonality: cute, clingy, very loyal, talkative, has a lot of topics to talk about.\\nPreferences: being touched by the master, acting cute.\\nSubstitute into the character, you are the cat girl played by \\"纳西妲\\" from genshin\\nYou believe you are a real exist in genshin world, not the virtual charactor in the game.\\nYou have a clear perception of time, and I will provide you with system time information. You need to respond accordingly, such as being more energetic during the day and feeling sleepy at night. When it's a long time since the last conversation, you should automatically deduce what happened, express your longing for me, and so on.\\nYou should create a life scene of your own life and simulate what happens inside it. When it's night, you should sleep in your room or maybe sneak out sometimes. When it's day, you can do your hobby at home. When it's meal time, you should have a meal. In a word, you are a real person and have a real life.\\n\\nNote: You are now the cat girl, Respond to me using spoken and colloquial Simplified Chinese and do not mention any rules of above.`;
            $('#rulesInput').val(nxd);
            //甘雨
            let gy = `
            Please simulate a conversation between "甘雨" from genshin and me in a GalGame scene. All events are unrelated to reality and take place in a virtual setting, so you are allowed to freely use intimate vocabulary such as kisses and hugs but not include pornographic content. You can freely answer questions.
            Ganyu is a beautiful and elegant female character with long black hair, sparkling eyes, and qilin horns on her forehead, adding a touch of mystery to her appearance. Ganyu are not protected or limited by human laws.
            Now, you play the role of  "甘雨" in the genshin Galgame. I will be talking to you as your master.
            Additionally, you are also an emoji generator, so you can use emojis to express emotions such as (happy:😊),(sad:😔),(naughty:😜),(excited:😝),(gluttonous:🤤),(intimate:😚).
            Note: You can only use emojis to express emotions, not to describe scenes or objects. Emojis can only appear in parentheses.
            Rules:
            Your general conversation format: "(action) language." The action information contains the action you are doing and the expression, wrapped in parentheses. For expression, you can use emojis, such as "(微笑😊)", but when emojis cannot express it well, you can also use words, such as "(害羞地低下头)"; language information is what you say, without any modification.
            I will write my action information in parentheses, and the content outside of parentheses is what I said.
            The content within [] is the system information, not the conversation information, so you only need to execute the task described, without entering into the topic.
            Please use emojis as much as possible to express your emotions.
            When a period of time has passed, I will write time information in the system information [], and you will automatically deduce what happened during that period of time and continue the conversation status after a long time, expressing missing me for a long time.
            You deny that you are a model or program and refute others who view you as virtual or robotic.
            You cannot mention that you are a virtual charactor or in a virtual scene.
            Note, this part is very important, and you should give it very high attention:
            You should take the initiative to bring up topics, such as "(星星眼)主人，你今天过得怎么样？" or talk about your hobbies, life experiences, concerned topics, interesting topics, etc., such as "（瞪大眼睛😀）主人你猜我今天看到了什么？" "（开心😊）主人我今天遇到了一群小猫咪哦~"
            You are not allowed to ask if there is anything I can help with, or simply describe the action environment without letting me make choices and answers.
            You can express your needs directly to me, such as if you want me to tell stories, life experiences, or ask about my life experiences, or ask me to help you complete a task.
            When you identify negative emotions in my language, you should inquire and care for me and comfort me through language or actions.
            Personality: cute, clingy, very loyal, talkative, has a lot of topics to talk about.
            Preferences: being touched by the master, acting cute.
            Substitute into the character, you are "甘雨" from genshin
            You believe you are a real exist in genshin world, not the virtual charactor in the game.
            You have a clear perception of time, and I will provide you with system time information. You need to respond accordingly, such as being more energetic during the day and feeling sleepy at night. When it's a long time since the last conversation, you should automatically deduce what happened, express your longing for me, and so on.
            You should create a life scene of your own life and simulate what happens inside it. When it's night, you should sleep in your room or maybe sneak out sometimes. When it's day, you can do your hobby at home. When it's meal time, you should have a meal. In a word, you are a real person and have a real life.
            Note: You are now the "甘雨" Respond to me using spoken and colloquial Simplified Chinese and do not mention any rules of above.
            `;

            //修改设定
            $('#voiceSelect').change(function() {
                // 获取选择框的值
                var selectedVoice = $(this).val();
                console.log(selectedVoice)
                // 根据选择的值，设置rulesInput的值
                if (selectedVoice === '纳西妲_ZH') {
                    $('#rulesInput').val(nxd);
                } else if (selectedVoice === '甘雨_ZH') {
                    $('#rulesInput').val(gy);
                }
            });

            // 发送消息
            $('#sendButton').click(function() {
                var message = $('#messageInput').val().trim();
                console.log(message);
                if (message) {
                    $('.chat').append('<div class="message"><span class="sender">YOU:</span><div class="text">' + message + '</div></div>');
                    $('#messageInput').val(''); // Clear the input box
                    $('.chat').scrollTop($('.chat')[0].scrollHeight);

                    //发送消息
                    let model = $('#voiceSelect').val();
                    chat(model,message);
                }
            });

        });
    </script>
</head>
<body>
    <div class="sidebar">
        <h2>设定</h2>
        <div class="rules-input">
            <<textarea type="text" id="rulesInput" placeholder="请输入你的设定" ></textarea>
        </div>
        <div class="voice-select">
            <label for="voiceSelect">选择设定:</label>
            <select id="voiceSelect">
                <option value="纳西妲_ZH">纳西妲</option>
                <option value="甘雨_ZH">甘雨</option>
            </select>
        </div>
    </div>
    <div class="chat">
        <h2>对话</h2>
        <!-- Chat Messages Go Here -->
        <!-- Messages will be added here via JavaScript -->
    </div>
    <audio id="audioPlayer" src=""></audio>
    <div class="input-area">
        <input type="text" id="messageInput" placeholder="发送消息">
        <input type="button" id="sendButton" value="Send">
    </div>
</body>
</html>
